<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <div class="flex bg-gray-100 h-[300px] w-[800px]">
      <div class="flex-item w-[100px] h-full flex items-center grow-[1]">Item 1</div>
      <div class="flex-item w-[100px] h-full flex items-center grow-[2]">Item 2</div>
      <div class="flex-item w-[100px] h-full flex items-center grow-[3]">Item 3</div>
      <div class="flex-item w-[100px] h-full flex items-center grow-[4]">Item 4</div>
    </div>
  </body>
  <script>
    /* 
      flex-grow 根据容器剩余空间的比例来分配空间
      比如: 容器大小为800px，4个子元素宽度为100px
      剩余空间为800 - 4 * 100 = 400px
      如果第一个元素的flex-grow为1，第二个为2，第三个为3，第四个为4
      那么分配的空间为:
      公式: ( 子项目的份数 / 总份数 ) * 剩余空间 = 子项目剩余空间划分的宽度
      例如: 第一个元素: (1 / 10) * 400 = 40px
      子项目的最终宽度为: ( 初始的宽度 + 子项目剩余空间划分的宽度 ) 
      那么第一个元素的最终宽度为: 100 + 40 = 140px
    */
  </script>
</html>
